<template>
  <v-row>
    <v-col cols="12">
      <h1 class="float-left j-title">{{ title }}</h1>
      <div class="float-right">
        <v-btn small rounded outlined @click="click" light>
          更多
          <j-icon size="20"> mdi-chevron-right </j-icon>
        </v-btn>
      </div>
    </v-col>
    <v-col cols="12" style="display: flex; flex-wrap: nowrap; overflow-x: auto">
      <v-card
        width="100"
        v-for="i in items"
        :key="i._id"
        class="card"
        style="background-color: transparent"
        elevation="0"
        tabindex="0"
        role="button"
        :aria-labelledby="i.subTitle"
      >
        <v-img min-width="100" min-height="100" :src="i.imgUrl"></v-img>
        <v-card-subtitle style="font-size: 12px; line-height: 16px; padding: 0px; padding-top: 5px; color: black">{{
          i.subTitle
        }}</v-card-subtitle>
      </v-card>
    </v-col>
  </v-row>
</template>

<script>
export default {
  name: "NavGeDan",
  props: {
    title: {
      type: String,
      require: true,
    },
    items: {
      type: Array,
      require: true,
    },
  },
  methods: {
    click() {
      console.log("查看更多事件");
      this.$emit("geduoclik");
    },
  },
};
</script>

<style scoped>
.card {
  margin-right: 10px;
}
.card:last-child {
  margin-right: 0px;
}
</style>
